<template>

  <div class="wrapper" ref="bscroll">
    <div class="content"> 
      <form>
        <input type="text" placeholder="搜索歌曲、歌手、专辑" v-model="msg" ref="search"/>
      </form>
      <div class="new-music">
        <section v-for="{songname,artistname,info,songid} of songs" :key="songid">
          <figure>
            <figcaption>{{songname}}</figcaption>
            <figcaption>{{artistname}}{{"-"+info}}</figcaption>
          </figure>
          <figure>
            <figcaption>
              <mark></mark>
            </figcaption>
          </figure>
        </section>
      </div>
    </div>
  </div>

</template>

<script>
import BScroll from "@better-scroll/core";
import MouseWheel from "@better-scroll/mouse-wheel";
import { getSearchData } from "../api/index";

// import axios from "axios";
// import Vue from "Vue";
// Vue.use(axios);

BScroll.use(MouseWheel);

export default {
  data: function() {
    return {
      songs: [],
      msg:''
    };
  },
watch:{
  msg:function(val,oldval){
      console.log(val)
  }
},

  mounted() {

    // console.log(this.$route.path)

    this.bScroll = new BScroll(this.$refs["bscroll"], {
      scrollY: true,
      pullUpLoad: true,
      mouseWheel: {
        speed: 20,
        invert: false,
        easeTime: 300
      }
    });
    getSearchData()
      .then(data => {
        // console.log(data);
        const { song } = data;
        this.songs = song;
      })
      .catch(err => {
        console.error(err);
      });

     
      // console.log(this.$refs["search"].value)
  }
};
</script>

<style lang="scss" scoped>
.wrapper {
  height: 5rem;
  .content {
    height: 6.2rem;
    form{
      height: 0.5rem;
      line-height: 0.5rem;
      background: #fff;
      border-bottom: 0.01rem solid #ccc;
      input{
            height: 0.3rem;
            width: 90%;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            border: 0;
            border-radius: 0.15rem;
            background: rgb(238, 237, 237);
            padding-left: 0.3rem; 
            
          }
    }
    
    .new-music {
      display: flex;
      flex-direction: column;
      
      section {
        padding: 0 0.1rem;
        display: flex;
        justify-content: space-between;
        height: 0.6rem;
        background: #fff;
        border-bottom: 1px solid #ccc;
        figure:nth-child(1) {
          figcaption:nth-child(1) {
            font-size: 0.16rem;
            line-height: 0.4rem;
            font-weight: normal;
          }
          figcaption:nth-child(2) {
            font-size: 0.12rem;
            color: #888;
          }
        }
        figure:nth-child(2) {
          display: flex;
          align-items: center;
          figcaption {
            width: 0.2rem;
            height: 0.2rem;
            border: 1px solid #888;
            border-radius: 50%;
            line-height: 0.6rem;
            display: flex;
            align-items: center;
            justify-content: center;
            mark {
              display: block;
              border: 0.05rem solid;
              border-color: transparent transparent transparent #888;
              margin-left: 0.07rem;
            }
          }
        }
      }
    }
  }
}
</style>